<template>
  <div>
    <!--    面包屑+新增按钮+批量删除按钮+搜索框和按钮-->
    <div>
      <div style="height: 30px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/libraryManage' }">题库管理</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">试题录入</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-col style="display: flex">
        <el-tabs @tab-click="clears" type="border-card" style="flex: 2">
          <el-tab-pane label="单选题">
              <el-form ref="form" :model="question" label-width="100px">
                <el-form-item label="题库">
                  <div>{{library.name}}</div>
                </el-form-item>
                <el-form-item label="难度">
                  <el-select v-model="question.difficulty">
                    <el-option
                      v-for="item in selectData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="题目来源">
                  <el-radio v-model="question.source" label="1">原创</el-radio>
                  <el-radio v-model="question.source" label="2">第三方</el-radio>
                </el-form-item>

                <el-form-item label="分数">
                  <el-input v-model="question.score"></el-input>
                </el-form-item>

                <el-form-item label="题目内容">
                  <el-input type="textarea" v-model="question.details"></el-input>
                </el-form-item>
                <el-form-item label="选项A">
                  <el-input v-model="option.ad"></el-input>
                  <el-radio v-model="question.answer" label="A">正确答案</el-radio>
                </el-form-item>
                <el-form-item label="选项B">
                  <el-input v-model="option.bd"></el-input>
                  <el-radio v-model="question.answer" label="B">正确答案</el-radio>
                </el-form-item>
                <el-form-item label="选项C">
                  <el-input v-model="option.cd"></el-input>
                  <el-radio v-model="question.answer" label="C">正确答案</el-radio>
                </el-form-item>
                <el-form-item label="选项D">
                  <el-input v-model="option.dd"></el-input>
                  <el-radio v-model="question.answer" label="D">正确答案</el-radio>
                </el-form-item>
                <el-form-item>
                  <el-button @click="submit">提交</el-button>
                  <!--点击取消返回题库列表              -->
                  <el-button @click="ret">取消</el-button>
                </el-form-item>
              </el-form>
          </el-tab-pane>
          <el-tab-pane label="多选题">
                <el-form ref="form" :model="question" label-width="100px">
                  <el-form-item label="题库">
                    <div>{{library.name}}</div>
                  </el-form-item>
                  <el-form-item label="难度">
                    <el-select v-model="question.difficulty">
                      <el-option
                        v-for="item in selectData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="题目来源">
                    <el-radio v-model="question.source" label="1">原创</el-radio>
                    <el-radio v-model="question.source" label="2">第三方</el-radio>
                  </el-form-item>

                  <el-form-item label="分数">
                    <el-input v-model="question.score"></el-input>
                  </el-form-item>

                  <el-form-item label="题目内容">
                    <el-input type="textarea" v-model="question.details"></el-input>
                  </el-form-item>
                  <el-form-item label="选项A">
                    <el-input v-model="option.ad"></el-input>
                    <el-checkbox v-model="checkList" label="A">正确答案</el-checkbox >
                  </el-form-item>
                  <el-form-item label="选项B">
                    <el-input v-model="option.bd"></el-input>
                    <el-checkbox  v-model="checkList" label="B">正确答案</el-checkbox >
                  </el-form-item>
                  <el-form-item label="选项C">
                    <el-input v-model="option.cd"></el-input>
                    <el-checkbox  v-model="checkList" label="C">正确答案</el-checkbox >
                  </el-form-item>
                  <el-form-item label="选项D">
                    <el-input v-model="option.dd"></el-input>
                    <el-checkbox  v-model="checkList" label="D">正确答案</el-checkbox >
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="submitmore">提交</el-button>
                    <!--点击取消返回题库列表              -->
                    <el-button @click="ret">取消</el-button>
                  </el-form-item>
              </el-form>
          </el-tab-pane>
          <el-tab-pane label="判断题">
            <el-form ref="form" :model="question" label-width="100px">
              <el-form-item label="题库">
                <div>{{library.name}}</div>
              </el-form-item>
              <el-form-item label="难度">
                <el-select v-model="question.difficulty">
                  <el-option
                    v-for="item in selectData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="题目来源">
                <el-radio v-model="question.source" label="1">原创</el-radio>
                <el-radio v-model="question.source" label="2">第三方</el-radio>
              </el-form-item>

              <el-form-item label="分数">
                <el-input v-model="question.score"></el-input>
              </el-form-item>

              <el-form-item label="题目内容">
                <el-input type="textarea" v-model="question.details"></el-input>
              </el-form-item>
              <el-form-item label="正确">
                <el-radio v-model="question.answer" label="对">正确</el-radio>
              </el-form-item>
              <el-form-item label="错误">
                <el-radio v-model="question.answer" label="错">错误</el-radio>
              </el-form-item>
              <el-form-item>
                <el-button @click="submitpanduan">提交</el-button>
                <!--点击取消返回题库列表              -->
                <el-button @click="ret">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="填空题">
            <el-form ref="form" :model="question" label-width="100px">
              <el-form-item label="题库">
                <div>{{library.name}}</div>
              </el-form-item>
              <el-form-item label="难度">
                <el-select v-model="question.difficulty">
                  <el-option
                    v-for="item in selectData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="题目来源">
                <el-radio v-model="question.source" label="1">原创</el-radio>
                <el-radio v-model="question.source" label="2">第三方</el-radio>
              </el-form-item>

              <el-form-item label="分数">
                <el-input v-model="question.score"></el-input>
              </el-form-item>

              <el-form-item label="题目内容">
                <el-input type="textarea" v-model="question.details"></el-input>
              </el-form-item>
              <el-form-item label="答案">
                <el-input v-model="question.answer"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="submittiankong">提交</el-button>
                <!--点击取消返回题库列表              -->
                <el-button @click="ret">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="问答题">
            <el-form ref="form" :model="question" label-width="100px">
              <el-form-item label="题库">
                <div>{{library.name}}</div>
              </el-form-item>
              <el-form-item label="难度">
                <el-select v-model="question.difficulty">
                  <el-option
                    v-for="item in selectData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="题目来源">
                <el-radio v-model="question.source" label="1">原创</el-radio>
                <el-radio v-model="question.source" label="2">第三方</el-radio>
              </el-form-item>

              <el-form-item label="分数">
                <el-input v-model="question.score"></el-input>
              </el-form-item>

              <el-form-item label="题目内容">
                <el-input type="textarea" v-model="question.details"></el-input>
              </el-form-item>
              <el-form-item label="答案">
                <el-input type="textarea" v-model="question.answer"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="submitwenda">提交</el-button>
                <!--点击取消返回题库列表              -->
                <el-button @click="ret">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="一键录入">


            <el-input style="margin: 20px" type="file" v-model="file.filepath"></el-input>
            <el-button style="margin: 20px" type="primary" @click="uploadFile">导入</el-button>



          </el-tab-pane>
          <el-row>
            <el-col :span="9"><div class="grid-content bg-purple">.</div></el-col>
            <el-col :span="15"><div class="grid-content bg-purple-light">
              <el-button style="margin: 20px;text-align: center" type="primary" @click="back">返回题库列表</el-button>
            </div></el-col>
          </el-row>
          </el-tabs>
        <div style="flex: 1;margin-left: 8px;background-color: white">
          <span><i style="font-size: 28px">题目预览:</i></span>
          <div style="margin-left: 50px;margin-top: 10px">
            题目：
            <div style="margin-left: 20px">{{question.details}}</div>
            题库：
            <div style="margin-left: 20px">{{library.name}}</div>
            难度：
            <div style="margin-left: 20px">{{question.difficulty}}</div>
            来源：
            <div style="margin-left: 20px">{{question.source}}</div>
            分数：
            <div style="margin-left: 20px">{{question.score}}</div>
            A：
            <div style="margin-left: 20px">{{option.ad}}</div>
            B：
            <div style="margin-left: 20px">{{option.bd}}</div>
            C：
            <div style="margin-left: 20px">{{option.cd}}</div>
            D：
            <div style="margin-left: 20px">{{option.dd}}</div>
            正确答案：
            <div style="margin-left: 20px">{{question.answer}}</div>
            <div style="margin-left: 20px">{{checkList}}</div>
          </div>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
  export default {
    name: "topic",
    data(){
      return{
        question:{
          details:'',
          type:'',
          difficulty:'',
          answer:'',
          source:'',
          lid:'',
          score:'',
          ad:'',
          bd:'',
          cd:'',
          dd:'',
          ed:'',
          fd:'',
          gd:''
        },
        option:{
          ad:'',
          bd:'',
          cd:'',
          dd:'',
          ed:'',
          fd:'',
          gd:''
        },
        library:{
          id:'',
          name:'',
          describe:''
        },
        selectData:[{
          value: '1',
          label: '简单'
        }, {
          value: '2',
          label: '中等'
        }, {
          value: '3',
          label: '困难'
        }],
        checkList:[],
        file:{
          liblid:'',
          filepath:'',
        }
      }
    },
    mounted() {
      this.library.id=this.$route.query.id;
      this.question.lid=this.$route.query.id;
      this.getLibrarys();
    },
    methods: {
      async getLibrarys() {
        let res = await this.$API.getLibrary(this.library.id);
        this.library = res.data;
        //console.log(res);
      },
      //单选
      async submit() {
        this.question.type = 1;
        this.question.ad = this.option.ad;
        this.question.bd = this.option.bd;
        this.question.cd = this.option.cd;
        this.question.dd = this.option.dd;
        this.question.ed = this.option.ed;
        this.question.fd = this.option.fd;
        this.question.gd = this.option.gd;
        let res = await this.$API.insertQuestion(this.question);
        if (res.code == 0 || res.code == '0') {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$message.error('添加失败');
        }
        //console.log(this.question);
        //console.log(res);
      },
      async submitmore() {
        this.question.type = 2;
        this.question.ad = this.option.ad;
        this.question.bd = this.option.bd;
        this.question.cd = this.option.cd;
        this.question.dd = this.option.dd;
        this.question.ed = this.option.ed;
        this.question.fd = this.option.fd;
        this.question.gd = this.option.gd;
        this.question.answer = this.checkList.toString();
        let res = await this.$API.insertQuestion(this.question);
        if (res.code == 0 || res.code == '0') {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$message.error('添加失败');
        }
        //console.log(this.question);
        //console.log(res);
      },
      async submitpanduan() {
        this.question.type = 3;
        let res = await this.$API.insertQuestion(this.question);
        if (res.code == 0 || res.code == '0') {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$message.error('添加失败');
        }
      },
      async submittiankong() {
        this.question.type = 4;
        let res = await this.$API.insertQuestion(this.question);
        if (res.code == 0 || res.code == '0') {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$message.error('添加失败');
        }
      },
      async submitwenda() {
        this.question.type = 5;
        let res = await this.$API.insertQuestion(this.question);
        if (res.code == 0 || res.code == '0') {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$message.error('添加失败');
        }
      },
      ret() {
        this.$router.push({ path: '/libraryManage' });
        this.question = {};
        this.option = {};
      },
      back() {
        this.$router.push({ path: '/libraryManage' });
        this.question = {};
        this.option = {};
      },
      clears() {
        this.question = {};
        this.question.option = {};
        this.option = {};
        this.question.lid = this.library.id;
      },
      async uploadFile(){
        this.file.liblid = this.library.id;
        console.log(this.file);
        let res = await this.$API.insertAuto(this.file);
        if (res.code == 0 || res.code == '0') {
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.$router.push({path:'/libraryManage'});
        } else {
          this.$message.error('添加失败');
        }
        console.log(res);
      }
    }
  };
</script>

<style scoped>

</style>